<script setup lang="ts">
import Filtrate from '~/components/Filtrate/index.vue'
import ItemMusic from '~/components/ItemMusic/index.vue'
import APICommon from '~/api/common'

defineOptions({
    name: 'MusicList',
    inheritAttrs: true
})


interface Emits {
    (e: 'on-select-change', filter: any, op: any): void;
}

interface Props {
    list: any[];
}

const $emit = defineEmits<Emits>()

const $props = defineProps<Props>()

const columns = ref([{
    placeholder: '曲风',
    value: 'genre',
    item: []
}, {
    placeholder: '情绪',
    value: 'emotion',
    item: []
}, {
    placeholder: '乐器',
    value: 'musical',
    item: []
}, {
    placeholder: '节拍',
    value: 'beat',
    item: []
}, {
    placeholder: '时长',
    value: 'duration',
    item: []
}])

function onSelectChange(value: Ref) {

    const filter: any = {}
    const op: any = {}
    for (let item in value.value) {
        filter[item] = JSON.parse(value.value[item]).type
        op[item] = JSON.parse(value.value[item]).op
    }

    $emit('on-select-change', filter, op)
}

function getScreen() {
    APICommon.getScreen('music').then(({ data }) => {
        columns.value[0].item = data.genre
        columns.value[1].item = data.emotion
        columns.value[2].item = data.musical
        columns.value[3].item = data.beat
        columns.value[4].item = data.duration
    })
}

const musicListRef = ref<any>([])

function clearMusic() {
    musicListRef.value.forEach((item: any) => {
        item.handleSuspend()
    })
}

function onPlay(index: number) {
    clearMusic()
    musicListRef.value[index].onPlay()
}

onMounted(() => {
    getScreen()
})

</script>


<template>
    <div class="music-list">
        <Filtrate :columns="columns" @onSelectChange="onSelectChange" />
        <el-empty class="empty" description="暂无内容" v-if="list.length == 0" :image-size="82" />
        <ItemMusic v-for="(item, index) in list" :key="item.id" :item="item" ref="musicListRef"
            @on-play="onPlay(index)" />
    </div>
</template>

<style lang="less" scoped></style>